---
layout: example.html
title: Draw Shapes
shortdesc: Using the ol/interaction/Draw to create regular shapes
docs: >
  This demonstrates the use of the `geometryFunction` option for the
  `ol/interaction/Draw`. Select a shape type from the dropdown above to start
  drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
  achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
  a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`
  with a `geometryFunction` that creates a box-shaped polygon instead of a
  circle. Star drawing uses a custom geometry function that converts a circle
  into a star using the center and radius provided by the draw interaction.
tags: "draw, edit, freehand, vector"
resources:
  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<div class="row">
  <div class="col-auto">
    <span class="input-group">
      <label class="input-group-text" for="type">Shape type:</label>
      <select class="form-select" id="type">
        <option value="Circle">Circle</option>
        <option value="Square">Square</option>
        <option value="Box">Box</option>
        <option value="Star">Star</option>
        <option value="None">None</option>
      </select>
      <input class="form-control" type="button" value="Undo" id="undo">
    </span>
  </div>
</div>
